<template>
  <div>
    <div class="main-box">
      <div class="main-le fl">
        <div class="home-column">
          <span class="fr" @click="guojiaClick()">更多 &gt;&gt;</span>
          <el-tabs v-model="activeName">
            <el-tab-pane label="国家政策" name="first"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="list-col2">
          <ul>
            <li v-for="item in guojiazhengci" @click="gotodetails(item)" :key="item.index">
              <a @click="gotodetails(item)">{{item.title}}</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="main-ri fr">
        <div class="home-column">
          <span class="fr" @click="biaogeClick()">更多 &gt;&gt;</span>
          <el-tabs v-model="activeName">
            <el-tab-pane label="表格下载" name="first"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="his-list">
          <div class="lists">
            <ul>
              <li v-for="(item, index) in biaogexiazai" v-if='index<=9' :key="item.index">
                <a :href="'http://img.shanghaifoxie.com' + item.pic" download="">{{item.title}}</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="main-box">
      <div class="main-le fl">
        <div class="home-column">
          <span class="fr" @click="fojiaoClick()">更多 &gt;&gt;</span>
          <el-tabs v-model="activeName">
            <el-tab-pane label="佛教制度" name="first"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="list-col2">
          <ul>
            <li v-for="(item, index) in fojiaozhidu" @click="gotodetails(item)" v-if='index<=19' :key="item.index">
              <a @click="gotodetails(item)">{{item.title}}</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="main-ri fr">
        <div class="home-column">
          <span class="fr" @click="difangClick()">更多 &gt;&gt;</span>
          <el-tabs v-model="activeName">
            <el-tab-pane label="地方法规" name="first"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="his-list">
          <div class="lists">
            <ul>
              <li v-for="(item, index) in difangfagui" @click="gotodetails(item)" v-if='index<=9' :key="item.index">
                <a @click="gotodetails(item)">{{item.title}}</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      request: {
        pageNo: '0',
        pageSize: '20',
        indexType: '4'
      },
      guojiazhengci: [],
      fojiaozhidu: [],
      difangfagui: [],
      biaogexiazai: []
    };
  },
  created() {
    this.init();
    this.$parent.activeIndex2 = '4';
  },
  methods: {
    init() {
      this.$http({
        method: 'get',
        url: `http://www.shanghaifoxie.com/web/api/pageIndex`,
        params: this.request
      })
        .then(response => {
          if (response.data !== null) {
            let dataArr = response.data.data.list;
            for (let i = 0; i < dataArr.length; i++) {
              if (dataArr[i].type === 25) {
                // 国家政策
                this.guojiazhengci = dataArr[i].data;
              }
              if (dataArr[i].type === 26) {
                // 佛教制度
                this.fojiaozhidu = dataArr[i].data;
              }
              if (dataArr[i].type === 27) {
                // 地方法规
                this.difangfagui = dataArr[i].data;
              }
              if (dataArr[i].type === 68) {
                // 表格下载
                this.biaogexiazai = dataArr[i].data;
              }
            }
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    handleClick(tab) {
    },
    // 国家政策
    guojiaClick() {
      let type = 25;
      this.$router.push({ path: `/pageList/${type}` });
    },
    // 表格下载
    biaogeClick() {
      let type = 68;
      this.$router.push({ path: `/pageList/${type}` });
    },
    // 佛教制度
    fojiaoClick() {
      let type = 26;
      this.$router.push({ path: `/pageList/${type}` });
    },
    // 地方法规
    difangClick() {
      let type = 27;
      this.$router.push({ path: `/pageList/${type}` });
    },
    gotodetails(item) {
      this.$router.push({ path: `/details/${item.id}` });
    }
  },
  components: {}
};
</script> 

<style lang="less" scoped>
.fr {
  float: right;
}
.fl {
  float: left;
}
.main-box {
  height: auto;
  overflow: hidden;
  padding-bottom: 20px;
  .main-le {
    width: 600px;
    .list-col2 {
      padding-top: 8px;
      li {
        cursor: pointer;
        width: 276px !important;
        float: left;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        position: relative;
        padding: 0 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        &::before {
          position: absolute;
          left: 0;
          top: 18px;
          content: '';
          width: 4px;
          height: 4px;
          background-color: #dd9b1e;
        }
      }
    }
  }
  .main-ri {
    width: 380px;
    .lists {
      padding-top: 8px;
      li {
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        position: relative;
        padding-left: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        &::before {
          position: absolute;
          left: 0;
          top: 18px;
          content: '';
          width: 4px;
          height: 4px;
          background-color: #dd9b1e;
        }
      }
    }
  }
}
</style>